<template>

  <div id="background">
    <div id="kaitou"><h1>行为决策实验平台</h1></div>
    <div id="jieshu">
    <h2>实验结束，感谢您的参与！</h2>
    </div>
    <el-card class="box-card" >
      <div v-for="o in 1" :key="o" class="text item">
        <el-button id="anniu" v-if="isClick == false"  @click="change">随机抽取一个实验数据</el-button>
        <h3 id="jieguo"><div>结果：{{totalAssets}}</div></h3>
        <div id="jieshao">{{money}}实验点&nbsp;=&nbsp;1元人民币</div>
      </div>
    </el-card>
  </div>

</template>

<script>
import {listExperimentStageByUserId} from "@/api/stage";

export default {
  name: "end",
  data() {
    return{
      userId: 0,
      isClick: false,
      recommendItems: [],
      totalAssets: '',
      recommendlist: [],
      money: this.$cookies.get('money')
    }
  },
  mounted() {
    this.suiji()
  },
  methods: {

    /* 换一换*/
    change() {
      this.recommendItems = this.getRandomArrayElements(this.recommendlist, 4)
      this.totalAssets = this.recommendItems[0].stageTotalAssets
      this.isClick = true
    },
    /* 随机获取数组中的数据*/
    getRandomArrayElements(arr, count) {
      var shuffled = arr.slice(0),
          i = arr.length,
          min = i - count,
          temp, index;
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
      }
      return shuffled.slice(min);
    },

    suiji(){
      this.userId = parseInt( this.$cookies.get('userId') )
      listExperimentStageByUserId(this.userId).then(res => {
        this.recommendlist = res.data.data.ExperimentStage
        // console.log(res.data.data.ExperimentStage)
      })
    }
  },
}
</script>

<style scoped>
#background{
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    LightSkyBlue,
    DodgerBlue
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
#jieshu{
  position: absolute;
  top: 40%;
  left: 43%;
}
#anniu{
  position: absolute;
  top: 30%;
  left: 96px;
  border-radius: 15px;
  line-height: 15px;
  background-color: #ffc125;
}
.el-card {
  top: 50%;
  position: absolute;
  left: 613px;
  width: 373px;
  height: 210px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}
#jieguo{
  position:absolute;
  top: 50%;
  left: 37%;
}
#jieshao{
  position: absolute;
  top: 10%;
  left: 28%;
}
#kaitou{
  position: absolute;
  color: aliceblue;
  font-size: 35px;
  font-weight: 800;
  text-transform: uppercase;
  top: 10%;
  left: 34%;
}
</style>
